<template>
    <div class="page-container">
        <h1 class="page-title">心理健康社区</h1>

        <div class="content-wrapper">
            <el-card class="intro-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h2>社区介绍</h2>
                    </div>
                </template>
                <div class="card-content">
                    <p>
                        这里是心理健康社区，您可以在这里分享您的心理健康经验、阅读专业文章，与其他用户交流互动。
                    </p>
                    <p>
                        所有的讨论都会由专业心理医生进行指导，为您提供科学、专业的心理健康建议。
                    </p>
                </div>
            </el-card>

            <div class="topic-tabs">
                <el-tabs type="border-card">
                    <el-tab-pane label="热门讨论">
                        <div class="topic-list">
                            <div
                                class="topic-item"
                                v-for="(topic, index) in hotTopics"
                                :key="index"
                            >
                                <div class="topic-header">
                                    <el-avatar :size="40" :src="topic.avatar">
                                        <el-icon><User /></el-icon>
                                    </el-avatar>
                                    <div class="topic-info">
                                        <div class="topic-title">
                                            {{ topic.title }}
                                        </div>
                                        <div class="topic-meta">
                                            <span class="author">{{
                                                topic.author
                                            }}</span>
                                            <span class="time">{{
                                                topic.time
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="topic-content">
                                    {{ topic.content }}
                                </div>
                                <div class="topic-footer">
                                    <div class="stats">
                                        <span
                                            ><el-icon><View /></el-icon>
                                            {{ topic.views }}</span
                                        >
                                        <span
                                            ><el-icon><ChatDotRound /></el-icon>
                                            {{ topic.comments }}</span
                                        >
                                        <span
                                            ><el-icon><Star /></el-icon>
                                            {{ topic.likes }}</span
                                        >
                                    </div>
                                    <el-button size="small" type="primary"
                                        >查看详情</el-button
                                    >
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="心理知识">
                        <div class="article-list">
                            <div
                                class="article-item"
                                v-for="(article, index) in articles"
                                :key="index"
                            >
                                <div class="article-content">
                                    <h3 class="article-title">
                                        {{ article.title }}
                                    </h3>
                                    <div class="article-meta">
                                        <span class="author">{{
                                            article.author
                                        }}</span>
                                        <span class="time">{{
                                            article.time
                                        }}</span>
                                        <span class="tags">
                                            <el-tag
                                                v-for="(tag, i) in article.tags"
                                                :key="i"
                                                size="small"
                                                effect="plain"
                                                >{{ tag }}</el-tag
                                            >
                                        </span>
                                    </div>
                                    <p class="article-summary">
                                        {{ article.summary }}
                                    </p>
                                </div>
                                <div class="article-cover" v-if="article.cover">
                                    <img :src="article.cover" alt="文章封面" />
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="我的关注">
                        <div class="empty-state">
                            <el-empty
                                description="您还没有关注任何话题或用户"
                            ></el-empty>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, View, ChatDotRound, Star } from '@element-plus/icons-vue'

// 热门讨论
const hotTopics = ref([
    {
        id: 1,
        title: '如何缓解工作压力？分享我的经验',
        author: '压力终结者',
        avatar: '',
        time: '3小时前',
        content:
            '最近工作压力很大，尝试了一些方法来缓解，分享给大家。首先，每天早晨花10分钟进行冥想，这对我帮助很大...',
        views: 328,
        comments: 46,
        likes: 89
    },
    {
        id: 2,
        title: '失眠问题该如何解决？求助',
        author: '夜不能寐',
        avatar: '',
        time: '昨天',
        content:
            '最近一个月一直失眠，很难入睡，即使睡着也容易醒来。已经尝试了热牛奶、减少屏幕时间等方法，但效果不明显...',
        views: 256,
        comments: 38,
        likes: 62
    },
    {
        id: 3,
        title: '分享：我是如何克服社交焦虑的',
        author: '新手社交家',
        avatar: '',
        time: '3天前',
        content:
            '曾经我有严重的社交焦虑，害怕与人交流，害怕公共场合发言。经过一系列的心理咨询和自我训练，我现在已经能够...',
        views: 489,
        comments: 73,
        likes: 142
    }
])

// 心理健康文章
const articles = ref([
    {
        id: 1,
        title: '认知行为疗法：改变思维方式，改变生活',
        author: '李医生',
        time: '2023-10-15',
        tags: ['认知行为疗法', '心理疗法'],
        summary:
            '认知行为疗法（CBT）是一种短期、目标导向的心理治疗方法，通过改变负面思维模式来改善情绪和行为问题...',
        cover: ''
    },
    {
        id: 2,
        title: '正念冥想：提高专注力和减轻压力的有效方法',
        author: '张教授',
        time: '2023-09-28',
        tags: ['正念冥想', '压力管理'],
        summary:
            '正念冥想是一种通过专注于当下体验，接受而不评判当前感受的练习方法。研究表明，正念冥想可以有效降低压力水平...',
        cover: ''
    },
    {
        id: 3,
        title: '情绪调节：如何有效管理自己的情绪',
        author: '王心理师',
        time: '2023-09-10',
        tags: ['情绪管理', '自我提升'],
        summary:
            '情绪调节是指个体识别、理解和管理自己情绪的能力。良好的情绪调节能力可以帮助您应对各种生活挑战，保持心理健康...',
        cover: ''
    }
])
</script>

<style scoped>
.page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-header h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: normal;
}

.card-content p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #666;
}

.topic-tabs {
    margin-top: 20px;
}

/* 话题列表样式 */
.topic-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.topic-item {
    border-bottom: 1px solid #eaedf2;
    padding-bottom: 15px;
}

.topic-item:last-child {
    border-bottom: none;
}

.topic-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.topic-info {
    margin-left: 10px;
    flex: 1;
}

.topic-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 500;
}

.topic-meta {
    font-size: 12px;
    color: #999;
}

.topic-meta .author {
    margin-right: 10px;
}

.topic-content {
    color: #666;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 14px;
}

.topic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats {
    display: flex;
    gap: 15px;
    color: #999;
    font-size: 12px;
}

.stats span {
    display: flex;
    align-items: center;
}

.stats .el-icon {
    margin-right: 3px;
}

/* 文章列表样式 */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article-item {
    display: flex;
    border-bottom: 1px solid #eaedf2;
    padding-bottom: 20px;
}

.article-item:last-child {
    border-bottom: none;
}

.article-content {
    flex: 1;
}

.article-title {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.article-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.article-summary {
    color: #666;
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
}

.article-cover {
    width: 120px;
    height: 80px;
    margin-left: 20px;
    overflow: hidden;
    border-radius: 4px;
}

.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tags {
    display: flex;
    gap: 5px;
}

/* 空状态 */
.empty-state {
    padding: 30px 0;
}

@media (max-width: 768px) {
    .article-item {
        flex-direction: column;
    }

    .article-cover {
        width: 100%;
        height: 150px;
        margin: 10px 0 0 0;
    }
}
</style>
